<template>
    <div class="message-root">

    </div>
</template>

<script>
    const config = {};
    export default {
        name: "message",
        data(){
            return{
                index:2000,
                duration:5000
            }
        },
        mounted(){
            config.index = this.index;
            config.duration = this.duration;
        },
        methods:{
            addMsg(msg){
                const div = document.createElement('div');
                div.classList.add(`message`);
                div.classList.add(`zoomIn`);
                div.classList.add(`temp-${config.index}`);
                div.style.zIndex = config.index++ + '';
                div.innerHTML = msg;
                document.querySelector('.message-root').append(div);
                setTimeout(()=>{
                    document.querySelector(`.message-root`).removeChild(div);
                },config.duration);
            }
        }
    }
</script>

<style scoped>
    .message-root{
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
        z-index: 99998;
        pointer-events: none;
        flex-direction: column;
    }

    .message-root >>> .message {
        border-radius: 3px;
        background: rgba(0,0,0,0.7);
        color: white;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        position: relative;
        z-index: 99999;
        pointer-events: none;
        margin: 5px;
    }

    .message-root >>> .message.zoomIn{
        animation: .1s linear zi;
    }
    @keyframes zi{
        0%{
            transform: scale(0.2);
        }
        50%{
            transform: scale(0.6);
        }
        100%{
            transform: scale(1);
        }
    }
</style>
